import React, { useState, useEffect } from "react";
import { Card, List, Progress, Row, Col, Typography, Spin } from "antd";
import * as echarts from "echarts";
import ReactECharts from "echarts-for-react";

const { Title } = Typography;

const Monitor: React.FC = () => {
  const [mapLoaded, setMapLoaded] = useState(false);

  useEffect(() => {
    // 注册世界地图数据
    fetch("https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/json/world.json")
      .then((response) => response.json())
      .then((data) => {
        echarts.registerMap("world", data);
        setMapLoaded(true);
      })
      .catch((error) => {
        console.error("加载地图数据失败:", error);
      });
  }, []);

  // 世界地图配置
  const worldMapOption = {
    tooltip: {
      trigger: "item",
    },
    visualMap: {
      min: 0,
      max: 1000,
      text: ["高", "低"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["#e0f3f8", "#045a8d"],
      },
    },
    series: [
      {
        name: "交易分布",
        type: "map",
        map: "world",
        roam: true,
        emphasis: {
          label: {
            show: true,
          },
        },
        data: [
          { name: "China", value: 1000 },
          { name: "United States", value: 800 },
          { name: "Japan", value: 600 },
          { name: "Germany", value: 400 },
          { name: "United Kingdom", value: 300 },
        ],
      },
    ],
  };

  // 预测图表配置
  const predictionChartOption = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
        areaStyle: {},
      },
    ],
  };

  // 品类占比图表配置
  const categoryChartOption = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "品类占比",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "服装" },
          { value: 735, name: "电子" },
          { value: 580, name: "食品" },
          { value: 484, name: "家居" },
          { value: 300, name: "其他" },
        ],

        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  return (
    <div className="p-6" data-oid="gn099e:">
      <Row gutter={[16, 16]} data-oid="dxdt36u">
        {/* 活动实时交易情况 */}
        <Col span={16} data-oid="zi0qra.">
          <Card data-oid="41de0vy">
            <Title level={4} data-oid="h:9kg::">
              活动实时交易情况
            </Title>
            {mapLoaded ? (
              <ReactECharts
                option={worldMapOption}
                style={{ height: "400px", width: "100%" }}
                opts={{ renderer: "svg" }}
                data-oid="wdkm4bz"
              />
            ) : (
              <div
                style={{
                  height: "400px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
                data-oid="3j00kv5"
              >
                <Spin tip="加载地图数据中..." data-oid=":uoormm" />
              </div>
            )}
            <List
              className="mt-4"
              dataSource={[
                "今日交易总额：124,543,233 元",
                "销售目标完成率：92%",
                "活动剩余时间：47:53:56:193",
                "每秒交易总额：234 元",
              ]}
              renderItem={(item) => (
                <List.Item data-oid="-kzzb0b">{item}</List.Item>
              )}
              data-oid="83hijuz"
            />
          </Card>
        </Col>

        {/* 活动情况预测 */}
        <Col span={8} data-oid="se_z2cz">
          <Card data-oid="4d1ku9o">
            <Title level={4} data-oid="g-0g7va">
              活动情况预测
            </Title>
            <ReactECharts
              option={predictionChartOption}
              style={{ height: "300px", width: "100%" }}
              opts={{ renderer: "svg" }}
              data-oid="s40s.1i"
            />

            <List
              className="mt-4"
              dataSource={["目标评估：有望达到预期", "1511 亿元", "666 亿元"]}
              renderItem={(item) => (
                <List.Item data-oid="55:5406">{item}</List.Item>
              )}
              data-oid="5p_3tq_"
            />
          </Card>
        </Col>

        {/* 各品类占比 */}
        <Col span={8} data-oid="2qpjqmc">
          <Card data-oid="34nz7pl">
            <Title level={4} data-oid="1z-v4i9">
              各品类占比
            </Title>
            <ReactECharts
              option={categoryChartOption}
              style={{ height: "300px", width: "100%" }}
              opts={{ renderer: "svg" }}
              data-oid="7lv5s20"
            />
          </Card>
        </Col>

        {/* 热门搜索 */}
        <Col span={8} data-oid="qann:7i">
          <Card data-oid="mm7w3ei">
            <Title level={4} data-oid="7hfv417">
              热门搜索
            </Title>
            <List
              dataSource={[
                "上海市 昆仑贝尔市",
                "沧州市 台南市",
                "九龙 牡丹江市",
                "海北藏族自治州",
              ]}
              renderItem={(item) => (
                <List.Item data-oid="uagkaqr">{item}</List.Item>
              )}
              data-oid="inxmlea"
            />
          </Card>
        </Col>

        {/* 资源剩余 */}
        <Col span={8} data-oid="ipf97qt">
          <Card data-oid="h3l1tja">
            <Title level={4} data-oid="5e:ehba">
              资源剩余
            </Title>
            <Progress
              type="circle"
              percent={35}
              status="active"
              format={(percent) => `${percent}%`}
              style={{ marginTop: "20px" }}
              data-oid="pkilf.q"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Monitor;
